<template>
  <view class="page">
    <scroll-view
      scroll-y
      scroll-with-animation
      style="height: calc(100vh - 50px)"
      :show-scrollbar="false"
    >
      <view class="fixed-title text-center pt-2 pb-2 font-14 text-white"
        >我的</view
      >
      <view class="bg-linear-gradient" style="margin-top: 39px">
        <free-list-item
          v-if="loginStatus"
          :border="false"
          @click="open('tabbar/user/user')"
          cover="../../../static/logo.png"
          title="xgw"
          coverSize="100"
          showRight
          showLeftIcon
          :showRights="false"
        >
          <view class="flex flex-column">
            <text class="text-dark font-20 font-weight-bold"
              >涉农主体企业名称</text
            >
            <text class="text-hover-dark font-14 mt-2">微信号：xaiwei268</text>
          </view>
        </free-list-item>
        <view
          class="pl-3 dfes pb-5"
          v-if="!loginStatus"
          @click="open('login/login')"
        >
          <text class="iconfont icon-wode2 font-48 text-white"></text>
          <text class="sign pl-2 font-16">登录/注册</text>
        </view>

        <view
          class="pl-3 pr-3 show-ls ml-3 mr-3 position-absolute left-0 right-0 mt-4"
        >
          <view class="lineHight-3 font-weight-bold font-14">我的数据</view>
          <view class="dfex text-center pb-3">
            <view @click="opens('tabbar/market/index')">
              <view class="font-20 text-333333 font-weight-bold">120</view>
              <view class="text-999999">产品/服务</view>
            </view>
            <view @click="opens('tabbar/order/index')">
              <view class="font-20 text-333333 font-weight-bold">120</view>
              <view class="text-999999">我的订单</view>
            </view>
            <view @click="open('tabbar/user/evaluation')">
              <view class="font-20 text-333333 font-weight-bold">120</view>
              <view class="text-999999">订单评价</view>
            </view>
          </view>
        </view>
      </view>

      <view class="mt-105 bg-white">
        <free-divider></free-divider>
        <free-divider></free-divider>
        <free-divider></free-divider>
        <free-list-item
          title="基础信息"
          showLeftIcon
          :showRight="false"
          :border="false"
          @click="open('tabbar/user/basic')"
        >
          <text
            slot="icon"
            class="iconfont font-lg py-1 icon-jichuguanli1"
          ></text>
        </free-list-item>
        <free-divider></free-divider>
        <free-list-item
          title="我的证件"
          showLeftIcon
          :showRight="false"
          @click="open('tabbar/user/identification')"
        >
          <text
            slot="icon"
            class="iconfont font-lg py-1 icon-idcard-examine"
          ></text>
        </free-list-item>
        <free-list-item
          title="服务吗"
          showLeftIcon
          :showRight="false"
          @click="open('tabbar/user/BrandCode')"
        >
          <text
            slot="icon"
            class="iconfont font-lg py-1 icon-guanzhuderen2"
          ></text>
        </free-list-item>
        <free-list-item
          title="订单评价"
          showLeftIcon
          :showRight="false"
          @click="open('tabbar/user/evaluation')"
        >
          <text slot="icon" class="iconfont font-lg py-1 icon-dingdan"></text>
        </free-list-item>
        <free-list-item
          title="退出登录"
          showLeftIcon
          :showRight="false"
          @click="update"
        >
          <text slot="icon" class="iconfont font-lg py-1 icon-tuichu"></text>
        </free-list-item>
      </view>
    </scroll-view>
    <free-confirm ref="confirm" :title="confirmTitle">
      <view class="iconfont icon-tuichu text-center font-48 text-A0A0A0"></view>
    </free-confirm>
  </view>
</template>

<script>
import freeListItem from "@/components/free-ui/free-list-item.vue";
import freeDivider from "@/components/free-ui/free-divider.vue";
import freeConfirm from "@/components/free-ui/free-confirm.vue";
import $U from "@/common/free-lib/util.js";

export default {
  components: {
    freeListItem,
    freeDivider,
    freeConfirm,
  },
  data() {
    return {
      confirmText: "",
      confirmType: "",
      loginStatus: false,
    };
  },
  onLoad() {
    $U.getStorage("token")
      ? (this.loginStatus = true)
      : (this.loginStatus = false);
  },
  computed: {
    confirmTitle() {
      return this.confirmType == "username"
        ? "是否退出登录！"
        : "是否退出登录！";
    },
  },
  methods: {
    update() {
      this.$refs.confirm.show((close) => {
        uni.navigateTo({
          url: "/pages/login/login",
        });

        uni.showToast({
          title: "退出成功",
          icon: "none",
        });
        close();
      });
    },
    open(path) {
      uni.navigateTo({
        url: "/pages/" + path,
      });
    },
    opens(path) {
      uni.switchTab({
        url: "/pages/" + path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-item {
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

.tab-item.active {
  font-size: 16px;
  color: #ffc251;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #ffc251;
}

.index-color-1 {
  font-size: 22px;
  color: #ff0000;
}

.index-color-2 {
  font-size: 22px;
  color: #17a2b8;
}

.index-color-3 {
  font-size: 22px;
  color: #ffc251;
}
</style>